<template>
  <div class="products">
    <BsSubmenu :subMenus="subMenus" />
    
    <!-- banner -->
    <section class="banner">
      <div class="hd">
        <div class="f20 title">云会议通用版</div>
        <div class="mt20 c3">
          云视频服务，让距离产生美！
        </div>
      </div>
    </section>

    <section class="section-1">
      <div class="section-title f24 text-center">云课堂组成</div>
      <div class="hd">
        <img src="../assets/images/products/meeting1.jpg" />
      </div>
    </section>

    
    <BsBuy />
    
  </div>
</template>

<script>
import BsSubmenu from '@/components/BsSubmenu'
import BsBuy from '@/components/BsBuy'

export default {
  components: {BsSubmenu,BsBuy},
  data (){
    return {
      subMenus: [
        {title: '云会议通用版', link:'/products/page1', active: true},
        {title: '云课堂教育局版', link:'/products/page2', active: false},
        {title: '云课堂学校版', link:'/products/page3', active: false},
        // {title: '智能终端', link:'/products/page4', active: false},
        // {title: '周边设备', link:'/products/page5', active: false},
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.banner{
  color: #fff;
  background: url(../assets/images/products/adult-businessman-businesswomen-1061588.png) no-repeat center center;
  height: 210px;
  .hd{
    padding-top: 60px;
    padding-right: 600px;
    .c3{
      line-height: 1.5;
    }
  }
}

.section-1{
  padding: 80px 0;
  .tec-list{
    margin-top: 20px;
    text-align: center;
    li{
      display: inline-block;
      padding: 20px;
      .desc{
        display: block;
        line-height: 1.6;
        margin-top: 10px;
      }
    }
  }
}

.section-1-1{
  padding: 80px 0;
  background: #f4f4f4;
}
.section-1-2{
  background:url(../assets/images/products/wx0010.jpg) no-repeat center center;
  height: 500px;
  background-size: 1300px;
}
.section-2{
  padding: 60px 0;
  background: #fff;
  .sence-list{
    width: 900px;
    margin: 40px auto;
    li { 
      float: left;
      background: #2289e3;
      color: #fff;
      width: 48%;
      margin-right: 2%;
      margin-top: 2%;
      height: 200px;
      line-height: 200px;
      font-size: 2em;
      text-align: center;
    }
  }
}

.section-3{
  height: 154px;
  background: url(../assets/images/products/2.png) no-repeat center center;
  padding-top: 57px;
  text-align: center;
  .btn{
    display: inline-block;
    padding: 8px 20px;
    &.btn-1{
      background: #e7a342;
      color: #fff;
    }
    &.btn-2{
      background: transparent;
      border: 1px solid #fff;
      color: #fff;
      margin-left: 20px;
    }
  }
}
</style>

